<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :height="titleHeight"
      ref="maxTable"
      border
      :highlight-current-row="true"
      :row-class-name="tableRowClassName"
      @cell-click="(row, column) => cellDblclickData(row, column)"
    >
      <!-- 多选框 -->
      <el-table-column
        v-if="selection"
        type="selection"
      >
      </el-table-column>
      <!-- 是否显示序列号 -->
      <el-table-column
        v-if="index"
        type="index"
      >
      </el-table-column>

      <template v-for="(item,index) in tableHead">
        <slot
          v-if="item.slot"
          :name="item.slot"
        >
        </slot>
        <el-table-column
          v-else
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :min-width="item.minWidth"
          :index="item.index"
          :align="item.align"
          :sortable="item.isSorted ? 'custom' : false"
        >
        </el-table-column>
      </template>
    </el-table>
    <template slot="empty">
      <el-empty
        :image-size="emptySize"
        :description="emptyText"
      ></el-empty>
    </template>
  </div>
</template>

<script>
/**
 * zhw封装 table表格重新封装
 * @param {Array} tableHeadConfig 表格表头参数
 * @param {Array} tableLoadData   表格数据参数
 * @param {Number|String} tableHeight 表格高度 用来固定表头
 * @param {String} align   表格文字对齐方式
 * @param {Boolean} selection   表格是否多选
 * @param {String} className   表格列的样式class

 * @param {String} selectionKey  多选时用来保存选中状态的值
 * @param {Boolean} fixedLift   是否开启左侧流体
 * @param {Boolean} expand   表单嵌套
 * @param {Boolean} cellStyle   表格单元格文字样式
 * @param {Boolean} cellClickFn   表格单元格回调方法
 * @param {Boolean} isSorted  表格是否进行排序
 * @param {Boolean} highlightCurrentRow  表格选择单行数据时使用色块表示 默认true
 * @param {Number} emptySize 表格暂无数据图片大小
 * @param {String} emptyText 表格暂无数据text
 * @param {Function({row, rowIndex})/String} rowClassName 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。
 * columnCall 点击后的回调函数 使用$emit调用 cellClickFn数组里面的columnCall字段名成是什么 你页面就调用什么方法名
 * selectData 多选框的选择后的回显 第一个参数，已选列表 第二参数，变更数据，第三个参数为全选状态
 */
export default {
  name: 'WorkspaceJsonIndex',
  data() {
    return {

    }
  },
  props: {
    tableList: {
      type: Array,
      default: () => []
    },
    tableHeadConfig: {
      type: Array,
      default: () => []
    },
    index: {
      type: Boolean,
      default: false
    },
    selection: {
      type: Boolean,
      default: false
    },
    titleHeight: {
      type: [Number, String]
    },
    //是否显示单元格
    border: {
      type: Boolean,
      default: false
    },
    //某一行的样式
    rowClassName: {
      type: Array,
      default: () => {
        return [
          {
            index: "",
            rowClass: ""
          }
        ]
      }
    },
    //辅助单元格回调方法，确定使用的是那个单元格
    cellClickFn: {
      type: Array,
      default: () => {
        return [
          {
            name: "",
            columnCall: ""
          }
        ]
      }
    },
    //点击行索引
    rowIndex: {
      type: Number,
      default: 0
    },
    emptySize: {
      type: Number,
      default: 100,
    },
    emptyText: {
      type: String,
      default: "暂无数据"
    },
  },
  computed: {
    tableData() {
      return this.tableList
    },
    tableHead() {
      return this.tableHeadConfig
    },
    tableIndex() {
      return this.rowIndex
    }
  },

  mounted() {

  },
  watch: {
    tableIndex: {
      handler(val) {
        console.log(val)
        val && this.setCurrent(val)
      }
    }
  },

  methods: {
    //给表格中的某一行添加class类
    tableRowClassName({ row, rowIndex }) {
      let rowClass;
      this.rowClassName.forEach((item) => {
        if (rowIndex === item.index) {
          rowClass = item.rowClass
        }
      })
      return rowClass
    },

    //点击某一行时触发的事件
    rowClick(row, column) {
      console.log(row, column)

    },
    //点击单元格时触发的事件
    cellDblclickData(row, column) {
      let call;
      this.cellClickFn.forEach(item => {
        if (item.name === column.label) {
          call = item.columnCall
        }
      })
      if (call) {
        this.$emit(call, row)
      } else {
        this.$emit("rowClick", row)
      }
    },
    //单选行数据显示色块跳转不同行的方法
    setCurrent(index) {
      this.$refs.maxTable.setCurrentRow(this.tableLoadData[index])
    },

  },
};
</script>

<style lang="scss" scoped>


</style>